<template>
  <div class="container-page-audio">
    <itemOpen v-if="!isEdit" :is-history="isHistory" @create="createArchive" />
    <template v-else>
      <div v-if="loading" class="item-loading">加载中...</div>
      <el-form v-else size="mini">
        <el-form-item>
          <itemUpload :aid="formData.id" :value="formData.audio_resources" @getResourceNum="getResourceNum" @uploading="uploadingHandelr" />
        </el-form-item>
        <el-form-item label="合辑标题">
          <el-input v-model="formData.title" placeholder="请填写合辑标题" />
        </el-form-item>
        <el-form-item label="合辑简介">
          <el-input v-model="formData.desc" type="textarea" rows="6" resize="none" :show-word-limit="true" placeholder="请填写合辑标题" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交合辑</el-button>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>

<script>
// item
import itemOpen from './components/open.vue';
import itemUpload from './components/upload.vue';
import { Loading } from 'element-ui';
// api
import { getHistoryEditArchive, createArchive, setArchive, getArchive } from '@/api/mivawork/audio.js';

export default {
  components: { itemUpload, itemOpen },
  data() {
    return {
      isSubmit: false,
      isEdit: false,
      isHistory: null,
      loading: true,
      resourceNum: 0,
      isUploading: false,
      formData: {
        id: null,
        title: '',
        desc: '',
        state: 0
      }
    };
  },
  beforeRouteLeave(to, form, next) {
    if (this.isSubmit) {
      window.onbeforeunload = null;
      next();
      return;
    }
    if (this.isEdit === false) {
      window.onbeforeunload = null;
      next();
      return;
    }
    if (window.confirm('离开可能会有数据不会被保存, 确认离开嘛?')) {
      window.onbeforeunload = null;
      next();
      return;
    }
    next(false);
  },
  async mounted() {
    await this.editOrCreateHandler();
    this.loading = false;
  },
  methods: {
    async editOrCreateHandler() {
      const id = await this.getParams();
      if (id) { // 如果有路由参数的id 则是从管理页跳过来编辑的
        this.isEdit = true;
        this.isHistory = true;
        const loadingInstance = Loading.service({ text: '合辑数据获取中' });
        await this.getArchive(id);
        loadingInstance.close();
      } else { // 否则查询有没有没提交的历史编辑
        await this.getHistoryEditArchive();
      }
    },
    async getHistoryEditArchive() {
      const res = await getHistoryEditArchive();
      if (res.code === 200) {
        this.isHistory = true;
        this.formData = res.data;
      } else if (res.code === 404) {
        this.isHistory = false;
      }
    },
    async createArchive() {
      const res = await createArchive();
      if (res.code > 500) {
        this.$message.error('系统出错请重试');
        return;
      }
      this.isEdit = true;
      this.formData = res.data;
      this.$message({ type: 'success', message: res.message });
      window.onbeforeunload = e => {
        return '关闭提示';
      };
    },
    async getArchive(id) {
      const res = await getArchive({ id });
      this.formData = res.data;
    },
    async getParams() {
      const id = this.$route.params.id;
      return id;
    },
    async submit() {
      this.isSubmit = true;
      if (this.resourceNum < 1) {
        this.$message.error('至少上传一个资源 (｀・ω・´) ');
        return;
      }
      if (this.isUploading) {
        this.$message.error('有资源正在上传中 (｀・ω・´) ');
        return;
      }
      this.formData.state = 1;
      await setArchive(this.formData);
      this.$router.replace({ name: 'audiosList' });
    },
    async getResourceNum(num) {
      this.resourceNum = num;
    },
    async uploadingHandelr(boolean) {
      this.isUploading = boolean;
    }
  }
};
</script>

<style lang="scss" scoped>
.container-page-audio {
  width: 740px;
  min-height: 100%;
  margin: auto;
  position: relative;
  .item-loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
